Add some spice and this cake will be done. This may seem like the trickiest part of your design but it's not really. We're going to show you how to do something that could be done with images. For the sake of argument, however, we'll show that it can also be done using a font—with much smaller bandwidth to boot. Essentially you are limited to whatever dingbats exist in Webdings and Wingdings—the two fonts commonly installed on both platforms.

Create two new selectors in your style sheet, one called ".boxrt" and another called ".boxlft". Using descriptive selector names is helpful when you have to edit your style sheet later. These selectors are named based on the "float direction" in the property. We've chosen Webdings because it's the most common. We recommend sticking with either one dingbat font or the other because finding a character that looks equally good in both dingbat fonts is difficult. We've chosen a couple we like, but feel free to choose something else. This is the fun part.

Below are the properties for these two selectors:

.boxrt {
   float: right;
   font-family: webdings, fantasy;
   font-size: 80px;
   color: #999999;
   margin: 2px 2px 2px 10px;
} 

.boxlft {
   float: left;
   font-family: webdings, fantasy;
   font-size: 75px;
   color: #999999;
   margin: 2px 10px 2px 2px;
}

The code hints are a tremendous help while working in Code view. Let them assist you as you insert these divs into your page. If you're not familiar with Code view, use the split view (View > Code and Design) and insert your cursor after the h1 in the content ID code. Hit Enter (Return on a Mac). It's not necessary but it makes your code neater. As you type <div class="boxrt">z</div> notice how the code auto-fills. When you type class into Code view, Dreamweaver MX gives you a list of the classes available; so if your selectors are already set up, you can choose them from here. Cool, huh?

As you can see, you have created a nicely styled page with only one tiny repeating background image (bg.gif). According to Dreamweaver's calculations, the entire page—including the image—weighs under 7K. This is a quick load even on a 28K modem.